TypeScript Avancerade Typer: Bemästra Mallbokstavliga och Villkorliga Typer

Internationellt Exempel: Hantera Olika Datumformat

Olika regioner i världen använder olika datumformat. Du kan använda villkorliga typer för att hantera dessa variationer.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementeringen skulle hantera olika datumformat)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Ogiltigt datumformat");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Typ: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Typ: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Typ: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Åtkomst till året med vetskap om att det kommer att finnas där

Det här exemplet använder villkorliga typer för att definiera olika datumparsningfunktioner baserat på det angivna datumformatet. Typen ParseDate säkerställer att det returnerade objektet har rätt egenskaper baserat på formatet.

Kombinera Mallbokstavliga och Villkorliga Typer

Den verkliga kraften kommer när du kombinerar mallbokstavliga typer och villkorliga typer. Detta möjliggör otroligt kraftfulla typmanipulationer.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName 
  ? { type: T; payload: any }  // Förenklat för demonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"

// Exempel på funktion som tar en typ
function processEvent(event: T): ExtractEventPayload {
    // I en verklig implementation skulle vi faktiskt skicka ut händelsen.
    console.log(`Behandlar händelse ${event}`);

    // I en verklig implementation skulle payloaden baseras på händelsetyp.
    return { type: event, payload: {} } as ExtractEventPayload;
}

// Notera att retartyperna är mycket specifika:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// Om du använder andra strängar får du never:
// const someOtherEvent = processEvent("someOtherEvent"); // Typen är `never`

Bästa Praxis och Överväganden

• Håll det enkelt: Även om dessa avancerade typer är kraftfulla kan de snabbt bli komplexa. Sträva efter tydlighet och underhållbarhet.
• Testa Noggrant: Säkerställ att dina typdefinitioner fungerar som förväntat genom att skriva omfattande enhetstester.
• Dokumentera din kod: Dokumentera tydligt syftet och beteendet hos dina avancerade typer för att förbättra kodläsbarheten.
• Överväg prestanda: Överdriven användning av avancerade typer kan påverka kompileringstiden. Profilera din kod och optimera där det behövs.